<template>
  <div>
	  <div>
	  		  <div style="margin:1% 0;display: inline-block;float: right;">
	  			<el-button size="mini" style="margin-right: 10px;" type="primary" icon="document" @click="addNotice">添加会员</el-button>
	  		  </div>
	  </div>
	  <el-table
	    v-loading="tableDataLoading"
	    :data="configData">
	    <el-table-column
	      prop="id"
	      label="编号"
	      width="80">
	    </el-table-column>
	    <el-table-column
	      prop="memberGrade"
	      label="会员等级">
	    </el-table-column>
		<el-table-column
		  prop="memberName"
		  label="会员名称">
		</el-table-column>
		<el-table-column
		  prop="memberMoney"
		  label="会员价格">
		</el-table-column>
		<el-table-column
		  prop="memberRate"
		  label="会员门票折扣"
		  width="150">
		</el-table-column>
		<el-table-column
			prop="memberIcon"
			label="会员图标"
			width="150">
				<template slot-scope="scope">
					<img :src="scope.row.memberIcon" alt="" width="80" height="80">
				</template>
		</el-table-column>
		<!-- <el-table-column
			prop="memberImg"
			label="会员背景图"
			width="150">
				<template slot-scope="scope">
					<img :src="scope.row.memberImg" alt="" width="100" height="50">
				</template>
		</el-table-column> -->
	    <el-table-column
	      prop="type"
	      label="是否有专属标识"
	      width="150">
	      <template slot-scope="scope">
			<span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.isIdentification == 0">否</span>
	        <span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.isIdentification == 1">是</span>
		  </template>
	    </el-table-column>
		<el-table-column
		  prop="type"
		  label="是否有领奖加速"
		  width="150">
		  <template slot-scope="scope">
			<span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.isSpeedUp == 0">否</span>
		    <span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.isSpeedUp == 1">是</span>
		  </template>
		</el-table-column>
		<el-table-column
		  prop="type"
		  label="是否有专属客服"
		  width="150">
		  <template slot-scope="scope">
			<span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.isService == 0">否</span>
		    <span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.isService == 1">是</span>
		  </template>
		</el-table-column>
		<el-table-column
		  prop="type"
		  label="是否有专属赛事"
		  width="150">
		  <template slot-scope="scope">
			<span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.isGame == 0">否</span>
		    <span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.isGame == 1">是</span>
		  </template>
		</el-table-column>
		<el-table-column
		  prop="type"
		  label="是否有专属折扣"
		  width="150">
		  <template slot-scope="scope">
			<span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.isRate == 0">否</span>
		    <span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.isRate == 1">是</span>
		  </template>
		</el-table-column>
		<el-table-column
		  prop="type"
		  label="是否有反外挂联盟"
		  width="150">
		  <template slot-scope="scope">
			<span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.isCheat == 0">否</span>
		    <span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.isCheat == 1">是</span>
		  </template>
		</el-table-column>
		<el-table-column label="操作" fixed='right' width="200">
		  <template slot-scope="scope">
		    <el-button size="mini" type="primary" @click="amendone(scope.$index, scope.row)">编辑
		    </el-button>
		    <el-button size="mini" type="danger" @click="deletes(scope.row)">删除
		    </el-button>
		  </template>
		</el-table-column>
	  </el-table>
	  <div style="text-align: center;margin-top: 10px;">
	    <el-pagination
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :page-sizes="[5, 10, 15, 20]"
	      :page-size="size"
	      :current-page="page"
	      layout="total,sizes, prev, pager, next"
	      :total="totalnum2">
	    </el-pagination>
	  </div>
	  <el-dialog title="添加会员" :visible.sync="dialogFormVisible" center>
		  <div style="margin-bottom: 20px;">
		  	<span style="width: 200px;display: inline-block;text-align: right;">会员等级：</span>
		  	<el-input style="width:50%;" v-model="memberGrade" @input="changeInput" type="number" placeholder="请输入会员等级"></el-input>
		  </div>
		  <div style="margin-bottom: 20px;">
		  	<span style="width: 200px;display: inline-block;text-align: right;">会员名称：</span>
		  	<el-input style="width:50%;" v-model="memberName" placeholder="请输入会员名称"></el-input>
		  </div>
		  <div style="margin-bottom: 20px;">
		  	<span style="width: 200px;display: inline-block;text-align: right;">会员价格：</span>
		  	<el-input style="width:50%;" v-model="memberMoney" type="number" placeholder="请输入会员价格"></el-input>
		  </div>
		  <div style="margin-bottom: 20px;">
		  	<span style="width: 200px;display: inline-block;text-align: right;">会员门票折扣：</span>
			 <el-input-number v-model="memberRate" style="width:50%;" :precision="2" :step="0.1" :min="0" :max="10" placeholder="请输入会员门票折扣 例0.1"></el-input-number>
		  <!-- 	<el-input style="width:50%;" v-model="memberRate"  type="number"  :precision="2" :step="0.1" :max="10"
			 ></el-input> -->
		  </div>
		  <div style="margin-bottom: 20px;display:flex;">
		  	<span style="width: 200px;display: inline-block;text-align: right;">会员图标：</span>
		  	<div style=" width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
		  		<el-upload
		  			class="avatar-uploader"
		  			v-model="memberIcon"
		  			action="https://admin.koudaidj.com/game/alioss/upload"
		  			:show-file-list="false"
		  			:on-success="handleAvatarSuccess1"
		  			>
		  			<img v-if="memberIcon" :src="memberIcon" class="avatar" style="border-radius: 6px;width: 148px;height: 148px;"/>
		  			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
		  		</el-upload>
		  	</div>
		  </div>
		  <!-- <div style="margin-bottom: 20px;display:flex;">
		  	<span style="width: 200px;display: inline-block;text-align: right;">会员背景图：</span>
		  	<div style=" width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
		  		<el-upload
		  			class="avatar-uploader"
		  			v-model="memberImg"
		  			action="https://admin.koudaidj.com/game/alioss/upload"
		  			:show-file-list="false"
		  			:on-success="handleAvatarSuccess2"
		  			>
		  			<img v-if="memberImg" :src="memberImg" class="avatar" style="border-radius: 6px;width: 148px;height: 148px;"/>
		  			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
		  		</el-upload>
		  	</div>
		  </div> -->
		  <div style="margin-bottom: 20px;">
		  	<span style="width: 200px;display: inline-block;text-align: right;">是否有专属标识：</span>
		  	<el-radio-group v-model="isIdentification">
		  	   <el-radio :label="1">开启</el-radio>
		  	   <el-radio :label="0">关闭</el-radio>
		  	</el-radio-group>
		  </div>
		  <div style="margin-bottom: 20px;">
		  	<span style="width: 200px;display: inline-block;text-align: right;">是否有领奖加速：</span>
		  	<el-radio-group v-model="isSpeedUp">
		  	   <el-radio :label="1">开启</el-radio>
		  	   <el-radio :label="0">关闭</el-radio>
		  	</el-radio-group>
		  </div>
		  <div style="margin-bottom: 20px;">
		  	<span style="width: 200px;display: inline-block;text-align: right;">是否有专属客服：</span>
		  	<el-radio-group v-model="isService">
		  	   <el-radio :label="1">开启</el-radio>
		  	   <el-radio :label="0">关闭</el-radio>
		  	</el-radio-group>
		  </div>
		  <div style="margin-bottom: 20px;">
		  	<span style="width: 200px;display: inline-block;text-align: right;">是否有专属赛事：</span>
		  	<el-radio-group v-model="isGame">
		  	   <el-radio :label="1">开启</el-radio>
		  	   <el-radio :label="0">关闭</el-radio>
		  	</el-radio-group>
		  </div>
		  <div style="margin-bottom: 20px;">
		  	<span style="width: 200px;display: inline-block;text-align: right;">是否有专属折扣：</span>
		  	<el-radio-group v-model="isRate">
		  	   <el-radio :label="1">开启</el-radio>
		  	   <el-radio :label="0">关闭</el-radio>
		  	</el-radio-group>
		  </div>
		  <div style="margin-bottom: 20px;">
		  	<span style="width: 200px;display: inline-block;text-align: right;">是否有反外挂联盟：</span>
		  	<el-radio-group v-model="isCheat">
		  	   <el-radio :label="1">开启</el-radio>
		  	   <el-radio :label="0">关闭</el-radio>
		  	</el-radio-group>
		  </div>
	    <div slot="footer" class="dialog-footer">
	      <el-button @click="dialogFormVisible = false">取 消</el-button>
	      <el-button type="primary" @click="releasNoticeTo()">确 定</el-button>
	    </div>
	  </el-dialog>
	  <!-- 修改配置弹框 -->
	  <el-dialog title="编辑会员配置" :visible.sync="dialogFormVisible1" center>
	  	<el-form :model="form">
	  	  <el-form-item label="会员等级：" :label-width="formLabelWidth" >
	  		<el-input v-model="form.memberGrade" type="number" @input="changeInput" style="width:65%;"></el-input>
	  	  </el-form-item>
	  	  <el-form-item label="会员名称：" :label-width="formLabelWidth" >
	  		<el-input v-model="form.memberName" style="width:65%;"></el-input>
	  	  </el-form-item>
				<el-form-item label="会员价格：" :label-width="formLabelWidth" >
				<el-input  v-model="form.memberMoney" type="number" style="width:65%;"></el-input>
				</el-form-item>
				<el-form-item label="会员时长：" :label-width="formLabelWidth" >
				<el-input  v-model="form.memberMonth" disabled="true" style="width:65%;"></el-input>
				</el-form-item>
				<el-form-item label="会员门票折扣：" :label-width="formLabelWidth" >
					<el-input-number v-model="form.memberRate" style="width:65%;" :precision="2" :step="0.1" :min="0" :max="10" placeholder="请输入会员门票折扣 例0.1"></el-input-number>
					<!-- <el-input  v-model="form.memberRate" type="number"  :min="0" :max="100" :controls="false" style="width:65%;"></el-input> -->
				</el-form-item>
				<el-form-item label="会员图标：" :label-width="formLabelWidth" >
					<div style=" width:140px;height:140px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
						<el-upload
							class="avatar-uploader"
							v-model="form.memberImg"
							action="https://admin.koudaidj.com/game/alioss/upload"
							:show-file-list="false"
							:on-success="handleAvatarSuccess3"
							>
							<img v-if="form.memberIcon" :src="form.memberIcon" class="avatar" style="border-radius: 6px;width: 148px;height: 148px;"/>
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</div>
				</el-form-item>
				<!-- <el-form-item label="会员背景图：" :label-width="formLabelWidth" >
					<div style=" width:140px;height:140px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
						<el-upload
							class="avatar-uploader"
							v-model="form.memberImg"
							action="https://admin.koudaidj.com/game/alioss/upload"
							:show-file-list="false"
							:on-success="handleAvatarSuccess4"
							>
							<img v-if="form.memberImg" :src="form.memberImg" class="avatar" style="border-radius: 6px;width: 148px;height: 148px;"/>
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</div>
				</el-form-item> -->
				<el-form-item label="是否有专属标识：" :label-width="formLabelWidth" >
				 <el-radio-group v-model="form.isIdentification">
				     <el-radio :label="1">开启</el-radio>
				     <el-radio :label="0">关闭</el-radio>
				 </el-radio-group>
				</el-form-item>
				<el-form-item label="是否有领奖加速：" :label-width="formLabelWidth" >
				 <el-radio-group v-model="form.isSpeedUp">
				     <el-radio :label="1">开启</el-radio>
				     <el-radio :label="0">关闭</el-radio>
				 </el-radio-group>
				</el-form-item>
				<el-form-item label="是否有专属客服：" :label-width="formLabelWidth" >
				 <el-radio-group v-model="form.isService">
				     <el-radio :label="1">开启</el-radio>
				     <el-radio :label="0">关闭</el-radio>
				 </el-radio-group>
				</el-form-item>
				<el-form-item label="是否有专属赛事：" :label-width="formLabelWidth" >
				 <el-radio-group v-model="form.isGame">
				     <el-radio :label="1">开启</el-radio>
				     <el-radio :label="0">关闭</el-radio>
				 </el-radio-group>
				</el-form-item>
				<el-form-item label="是否有专属折扣：" :label-width="formLabelWidth" >
				 <el-radio-group v-model="form.isRate">
				     <el-radio :label="1">开启</el-radio>
				     <el-radio :label="0">关闭</el-radio>
				 </el-radio-group>
				</el-form-item>
				<el-form-item label="是否有反外挂联盟：" :label-width="formLabelWidth" >
				 <el-radio-group v-model="form.isCheat">
				     <el-radio :label="1">开启</el-radio>
				     <el-radio :label="0">关闭</el-radio>
				 </el-radio-group>
				</el-form-item>
	  	</el-form>
	    <div slot="footer" class="dialog-footer">
	  	<el-button @click="dialogFormVisible1 = false">取 消</el-button>
	  	<el-button type="primary" @click="amendoneNoticeTo()">确 定</el-button>
	    </div>
	  </el-dialog>
  </div>
</template>

<script>

export default {
    data () {
      return {
        size: 10,
        page: 1,
        totalnum:0,
        totalnum2:0,
        ids:'',
        content :'',
        activeName: 'first',
        tableDataLoading: false,
        dialogFormVisible:false,
        dialogFormVisible1:false,
        dialogFormVisible2:false,
        dialogFormVisible3:false,
		memberGrade:'',
		memberName:'',
		memberMoney:'',
		memberRate:'',
		memberIcon:'',
		memberImg:'',
		memberMonth: '',
		isCheat:0,
		isGame:0,
		isIdentification:0,
		isRate:0,
		isService:0,
		isSpeedUp:0,
        formLabelWidth:'200px',
        checkBoxData: [],//多选框选择的值
        tableData: [],
        configData:[],
        form:{
          id:'',
          memberGrade:'',
          memberName:'',
          memberMoney:0.00,
          teamRate:0.00,
          zhiRate:0.00,
          feiRate:0.00,
          memberRate:0.00,
          memberIcon:'',
          memberImg:'',
          isCheat:0,
          isGame:0,
          isIdentification:0,
          isRate:0,
          isService:0,
          isSpeedUp:0,
		  memberMonth:'',
        },
        form2:{
          picture:'',
        },
      }
    },
    methods: {
		changeInput() {
		      var pattern = /^[1-9][1-9]*$/ // 正整数的正则表达式
		      // 不符合正整数时
		      if (!pattern.test(this.memberGrade)) {
		        // input 框绑定的内容为空
		        this.memberGrade = ''
		      }
		},
		deletes(row){
			this.$confirm(`确定删除此条信息?`, '提示', {
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning'
			}).then(() => {
			  this.$http({
				url: this.$http.adornUrl2('/memberDetails/deleteMemberByIds'),
				method: 'get',
				params: this.$http.adornParams({
					'ids':row.id
				})
			  }).then(({data}) => {
				  this.$message({
					message: '删除成功',
					type: 'success',
					duration: 1500,
					onClose: () => {
					  this.dataSelect()
					}
				  })
			  })
			}).catch(() => {})		
		},
		handleAvatarSuccess1(file) {
		     this.memberIcon = file.data;
		},
		handleAvatarSuccess2(file) {
		     this.memberImg = file.data;
		},
		handleAvatarSuccess3(file) {
		     this.form.memberIcon = file.data;
		},
		handleAvatarSuccess4(file) {
		     this.form.memberImg = file.data;
		},
      handleSizeChange (val) {
        this.size = val
        this.dataSelect()
      },
      handleCurrentChange (val) {
        this.page = val
        this.dataSelect()
      },
      // 图片预览
      lookMember(rows){
        this.dialogFormVisible2 = true
        this.form2.picture = rows.picture
      },
      selectTrigger(){
        this.page = 1
        this.size = 5
        this.dataSelect()
      },
	  addNotice(){
	  	this.dialogFormVisible = true
	  },
	  //添加会员配置
	  releasNoticeTo(){
	  	if (this.memberGrade == '') {
	  	    this.$notify({
	  	        title: '提示',
	  	        duration: 1800,
	  	        message: '请输入会员等级',
	  	        type: 'warning'
	  	    });
	  	    return
	  	}
	  	if (this.memberName == '') {
	  	    this.$notify({
	  	        title: '提示',
	  	        duration: 1800,
	  	        message: '请输入会员名称',
	  	        type: 'warning'
	  	    });
	  	    return
	  	}
	  	if (this.memberMoney == '') {
	  	    this.$notify({
	  	        title: '提示',
	  	        duration: 1800,
	  	        message: '请输入会员价格',
	  	        type: 'warning'
	  	    });
	  	    return
	  	}
		if (this.memberRate == '') {
		    this.$notify({
		        title: '提示',
		        duration: 1800,
		        message: '请输入会员门票折扣',
		        type: 'warning'
		    });
		    return
		}
		if (this.memberIcon == '') {
		    this.$notify({
		        title: '提示',
		        duration: 1800,
		        message: '请上传会员图标',
		        type: 'warning'
		    });
		    return
		}
	  	this.$http({
	  	  url: this.$http.adornUrl2('/memberDetails/insetMember'),
	  	  method: 'post',
	  	  data: this.$http.adornData({
	  		'memberGrade': this.memberGrade,
	  		'memberName': this.memberName,
	  		'memberMoney':this.memberMoney,
	  		'teamRate': this.teamRate,
	  		'zhiRate': this.zhiRate,
	  		'feiRate':this.feiRate,
	  		'memberRate': this.memberRate,
	  		'memberIcon': this.memberIcon,
	  		'memberImg':this.memberImg,
	  		'isCheat': this.isCheat,
	  		'isGame':this.isGame,
	  		'isIdentification': this.isIdentification,
	  		'isRate': this.isRate,
	  		'isService':this.isService,
	  		'isSpeedUp': this.isSpeedUp,
	  	  })
	  	}).then(({data}) => {
	  		this.dialogFormVisible = false
	  	    this.$message({
	  	      message: '操作成功',
	  	      type: 'success',
	  	      duration: 1500,
	  	      onClose: () => {
	  			this.memberGrade = ''
	  			this.memberName = ''
	  			this.memberMoney = 
	  			this.teamRate = ''
	  			this.zhiRate = ''
				this.feiRate = ''
				this.memberRate = ''
				this.memberIcon = ''
				this.memberImg = ''
				this.isCheat = 0
				this.isGame = 0
				this.isIdentification = 0
				this.isRate = 0
				this.isService = 0
				this.isSpeedUp = 0
	  	        this.dataSelect()
	  	      }
	  	    })
	  	})
	  },
      // 修改配置弹框
      amendone(index,rows){
      	this.dialogFormVisible1=true
      	this.form.id = rows.id
		this.form.memberGrade = rows.memberGrade
      	this.form.memberName = rows.memberName
      	this.form.memberMoney = rows.memberMoney
		this.form.memberRate = rows.memberRate
		this.form.memberIcon = rows.memberIcon
		this.form.memberMonth = rows.memberMonth
		this.form.memberImg = rows.memberImg
		this.form.isCheat = rows.isCheat
		this.form.isGame = rows.isGame
		this.form.isIdentification = rows.isIdentification
		this.form.isRate = rows.isRate
		this.form.isService = rows.isService
		this.form.isSpeedUp = rows.isSpeedUp
      },
      // 修改配置
      amendoneNoticeTo(){
		  if (this.form.memberGrade == '') {
		      this.$notify({
		          title: '提示',
		          duration: 1800,
		          message: '请输入会员等级',
		          type: 'warning'
		      });
		      return
		  }
		  if (this.form.memberName == '') {
		      this.$notify({
		          title: '提示',
		          duration: 1800,
		          message: '请输入会员名称',
		          type: 'warning'
		      });
		      return
		  }
		  if (this.form.memberMoney == '') {
		      this.$notify({
		          title: '提示',
		          duration: 1800,
		          message: '请输入会员价格',
		          type: 'warning'
		      });
		      return
		  }
		  if (this.form.memberRate == '') {
		      this.$notify({
		          title: '提示',
		          duration: 1800,
		          message: '请输入会员门票折扣',
		          type: 'warning'
		      });
		      return
		  }
		  if (this.form.memberIcon == '') {
		      this.$notify({
		          title: '提示',
		          duration: 1800,
		          message: '请上传会员图标',
		          type: 'warning'
		      });
		      return
		  }
      	this.$http({
      	  url: this.$http.adornUrl2('/memberDetails/insetMember'),
      	  method: 'post',
      	  data: this.$http.adornData({
            'id':this.form.id,
      	    'memberGrade': this.form.memberGrade,
            'memberName': this.form.memberName,
            'memberMoney':this.form.memberMoney,
			'memberRate': this.form.memberRate,
			'memberIcon': this.form.memberIcon,
			'memberImg':this.form.memberImg,
			'isCheat': this.form.isCheat,
			'isGame':this.form.isGame,
			'isIdentification': this.form.isIdentification,
			'isRate': this.form.isRate,
			'isService':this.form.isService,
			'isSpeedUp': this.form.isSpeedUp,
			'memberMonth': this.form.memberMonth,
      	  })
      	}).then(({data}) => {
      	  if (data && data.status === 0) {
      		this.dialogFormVisible1 = false
      	    this.$message({
      	      message: '操作成功',
      	      type: 'success',
      	      duration: 1500,
      	      onClose: () => {
      	        this.dataSelect()
      	      }
      	    })
      	  } else {
      	    this.$message.error(data.msg)
      	  }
      	})
      },
      // 获取数据列表
      dataSelect () {
         this.tableDataLoading = true
        let page = this.page-1
        this.$http({
          url: this.$http.adornUrl2('/memberDetails/selectMemberPage'),
          method: 'get',
          params: this.$http.adornParams({
            'page': page,
            'size': this.size,
          })
        }).then(({data}) => {
          this.tableDataLoading = false
          let returnData = data.data
          this.configData = returnData.content
          this.totalnum2 = returnData.totalElements
					console.log(this.configData)
					console.log(totalnum2)
        })
      },
    },
    mounted () {
      this.dataSelect()
    }
  }
</script>

<style>
</style>
